<template>
  <div>
    <!-- 报警预览 -->
    <el-row>
      <!-- 面包屑 -->
      <el-col :span="12" :offset="1" style="margin-bottom: 10px;margin-top: 10px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/warn' }" class="bread"><i class="el-icon-location-outline"></i>预警预览</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/warn' }" class="bread">预警记录</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!-- 筛选 -->
      <el-col :span="5" :offset="5" class="buttonsift">
        <el-button type="text" @click="changeDisplay">
          <span v-if="isDisplay==false">高级筛选</span>
          <span v-else>高级筛选</span>
        </el-button>
        <!--        <el-button type="text">今日</el-button>-->
        <!--        <el-button type="text">昨日</el-button>-->
        <!--        <el-button type="text">7日</el-button>-->
        <!--        <el-button type="text" style="margin-left: 40px"><i class="el-icon-upload2"></i>导出</el-button>-->
      </el-col>
    </el-row>
    <!-- 隐藏面板 -->
    <el-row>
      <div style="line-height: 0.8;" v-show="isDisplay" class="selectbutton">
        <el-form :model="SelectForm" size="mini">
          <el-col :span="4" :offset="2">
            <el-form-item label="告警类型">
              <el-select v-model="SelectForm.alarmtype" placeholder="请选择" class="selectem" clearable ref="warntab">
                <el-option
                    v-for="alarmtype in typeoptions"
                    :key="alarmtype.value"
                    :label="alarmtype.label"
                    :value="alarmtype.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="相机名称">
              <div style="display: flex; align-items: center;">
                <el-input v-model="SelectForm.device" placeholder="请输入相机名称" class="selectem custom-input" clearable ref="warntab"></el-input>
              </div>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="日期">-->
<!--              <el-date-picker type="datetime" placeholder="开始时间" v-model="SelectForm.datetime1" class="selectem" clearable ref="warntab"></el-date-picker>-->
<!--              <span class="line"> - </span>-->
<!--              <el-date-picker type="datetime" placeholder="结束时间" v-model="SelectForm.datetime2" class="selectem" clearable ref="warntab"></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="3">
            <el-form-item>
              <el-button round @click="searchDisplay">搜索</el-button>
              <el-button round @click="clearDisplay">清除筛选</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </el-row>
    <!-- 标签页 -->
    <el-row type="flex" justify="center" style="margin:0;">
      <el-col>
        <el-tabs class="tabs-con" v-model="activeName" @tab-click="handleClick" stretch>
          <el-tab-pane label="全部" name="warntab">
              <WarnTab :item-type="sss[0]" v-if="activeName == 'warntab'"  ref="warntab"></WarnTab>
          </el-tab-pane>
          <el-tab-pane label="待核查" name="warntab1">
              <WarnTab :item-type="sss[1]" v-if="activeName == 'warntab1'" ref="warntab"></WarnTab>
          </el-tab-pane>
          <el-tab-pane label="已核查" name="warntab2">
              <WarnTab :item-type="sss[2]" v-if="activeName == 'warntab2'" ref="warntab"></WarnTab>
          </el-tab-pane>
          <el-tab-pane label="已排除" name="warntab3">
              <WarnTab :item-type="sss[3]" v-if="activeName == 'warntab3'" ref="warntab"></WarnTab>
          </el-tab-pane>
          <el-tab-pane label="未推送" name="warntab5">
              <WarnTab :item-type="sss[2]" v-if="activeName == 'warntab5'" ref="warntab"></WarnTab>
          </el-tab-pane>
          <el-tab-pane label="已推送" name="warntab4">
              <WarnTab :item-type="sss[4]" v-if="activeName == 'warntab4'" ref="warntab"></WarnTab>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WarnTab from './warntab.vue';
import {getWarning,getDevice} from "@/api/warning/wraning";

export default {

    data(){
      return{
        typeoptions:[],
        deviceoptions:[],
        sss:[0,1,2,3,4],
        activeName: 'warntab',//标签页
        isDisplay:false,//隐藏面板
        SelectForm:{//筛选
          alarmtype:'',
          device:'',
          datetime1:'',
          datetime2:''
        }
      }
    },
  created() {

  },
  methods:{
      //标签页
      handleClick(tab, event) {
        this.activeName = tab.name;
        var that = this;
        setTimeout(function(){
            that.onQuery();
        },500);
      },
    getWarning(data){
      getWarning(data).then(res=>{
       // console.log("报警类型")
        //console.log(res)
        let newlist=[]

        for (let i = 0; i <res.length; i++)  {

          newlist.push({label:res[i].algorName,value:res[i].algorId})
        }
        //console.log(newlist)
        this.typeoptions=newlist;
       // console.log(this.SelectForm)
      })
    },
    // getDevice(data){
    //   getDevice(data).then(res=>{
    //     console.log("报警类型")
    //     console.log(res.rows)
    //     let newlist=[]
    //
    //     for (let i = 0; i <res.rows.length; i++)  {
    //       newlist.push({label:res.rows[i].algorName,value:res.rows[i].algorId})
    //     }
    //     console.log(newlist)
    //     this.typeoptions=newlist;
    //     console.log(this.SelectForm)
    //   })
    // },
      onQuery() {
        this.$refs[this.activeName].getList();
      },
      changeDisplay(){
        this.isDisplay = !this.isDisplay
        this.getWarning( { pageNum: 1,
          pageSize:10})
        // this.getDevice({ pageNum: 1,
        //   pageSize:10})
      },
    //重置筛选
    clearDisplay(){
      this.SelectForm={
        alarmtype:[],
            device:[],
            datetime1:'',
            datetime2:''}
      if (this.$refs.warntab) {
        // 调用子组件名为 handleClear 的方法，并传递 SelectForm 数据（可以传空对象等根据需求来定）作为参数
        this.$refs.warntab.resetQuery(this.SelectForm);
      }
    },
    searchDisplay(){
      if (this.$refs.warntab) {
        // 调用子组件名为 handleSearch 的方法，并传递 SelectForm 数据作为参数
        this.$refs.warntab.handleQuery(this.SelectForm);
      }
    }
  },
    components:{
      WarnTab
    }
}
</script>
<style scoped>
.tabs-con{
  position: relative;
  z-index: 0; /* 确保 tabs 不是最顶层 */
}
.bread /deep/ .el-breadcrumb__inner{
  /* color: #f2f2f2; */
}
/* .bread /deep/ .el-breadcrumb__inner:hover{color: #f2f2f2;} */
.el-row{
  margin-top: 20px;
  /* margin-bottom:10px; */
}
.el-col{
  margin-right: 10px;
}
.el-form{
  color: #f2f2f2;
}
::v-deep .el-form-item__label{
  /* color: #f2f2f2; */
}
.selectem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  color: #000000;
  border:1px solid #1A3B5B;
}
.selectem /deep/ .el-input__inner:focus{border-color:#4c87c2}
.selectem /deep/ .el-input__inner:hover{border-color:#4c87c2}
/* .selectem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
} */

.buttonsift .el-button{
  margin-right: 15px;
  color: #000000;
}
.selectbutton .el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
}
::v-deep .el-tabs__header{
  margin: 0px;
}
::v-deep .el-tabs__nav-scroll{
	width:50%;
	margin:0 auto;
}
::v-deep .el-tabs__item {
  color:#000000;
  /* font-family: "微软雅黑"; */
  /* font-size: 16px; */
}
::v-deep .el-tabs__item.is-active {
  color: #31A1F9;
}
::v-deep .el-tabs__nav-wrap::after{
  height:1px;
  background-color: #265389;
}
</style>
